<template>
    <div class="CustomerSource-box">
        <div class="top-box">
            <span>客户来源</span>
            <el-button v-auth="'CUSTOMER_SOURCE_ADD_CUSTOMER_PROP'" type="primary" @click="showAddSourceFun()"
                >新增客户来源</el-button
            >
        </div>
        <el-table
            v-if="showTable"
            id="tableRef"
            :row-class-name="tableRowClassName"
            header-row-class-name="table_header_title"
            class="configure-table-box3"
            :data="tableList">
            <el-table-column width="55">
                <template #default>
                    <img src="@/assets/customer/sort-icon.png" class="sortImg" alt="" />
                </template>
            </el-table-column>
            <el-table-column label="序号" prop="sort" />
            <el-table-column prop="typeName" label="来源名称">
                <template #default="scope">
                    {{ scope.row.name || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    {{ scope.row.status == 1 ? '已开启' : '已关闭' }}
                </template>
                <!-- <template #default="scope">
          <el-switch :value="scope.row.status" :active-value="1" :inactive-value="2" @click="changeStatus(scope.row)" v-auth="CUSTOMER_SOURCE_OPEN_CLOSE" /><span style="margin: 0 10px"
            >{{ scope.row.status == 1 ? '已开启' : '已关闭' }}
          </span>
        </template> -->
            </el-table-column>
            <el-table-column label="类型">
                <template #default="scope">
                    {{ scope.row.is_system == 1 ? '系统' : '自定义' }}
                </template>
            </el-table-column>
            <el-table-column label="创建人">
                <template #default="scope">
                    {{ scope.row.user_name || '系统' }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180">
                <template #default="scope">
                    {{ scope.row.created_at || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
                <template #default="scope">
                    <div :data-id="scope.$index">
                        <el-button
                            v-auth="'CUSTOMER_SOURCE_OPEN_CLOSE'"
                            size="small"
                            @click="changeStatus(scope.row)"
                            >{{ scope.row.status == 1 ? '关闭' : '开启' }}</el-button
                        >
                        <el-button v-auth="'CUSTOMER_SOURCE_EDIT'" size="small" @click="showAddSourceFun(scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            v-show="scope.row.is_system == 2"
                            v-auth="'CUSTOMER_SOURCE_DEL'"
                            size="small"
                            @click="DelSourceFun(scope.row)"
                            >删除</el-button
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <AddSource ref="AddSourceRef" @refresh="getTableList" />
    </div>
</template>

<script lang="ts" setup>
// import ZWPagination from '@/components/ZWPagination.vue'
import Sortable from 'sortablejs';
import { nextTick, ref, onMounted } from 'vue';
import AddSource from './AddSource.vue';
import { sourceList, sourceSort, sourceEdit, updateStatus, updateCustStatus, delSource } from '../../api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useStore } from '@/store';
const store = useStore();
// const PaginationRef = ref(null)
const showTable = ref(true);
const tableList = ref([{ source_id: 1 }, { source_id: 2 }]);
const AddSourceRef = ref(null);
const pageParam = { page: 1, page_size: 15 };
// 排序的方法
const setSortableFun = () => {
    let nowIndex;
    let copyTableList;
    nextTick(() => {
        const SortableBox = new Sortable(
            document.querySelector('#tableRef').querySelector('.el-table__body-wrapper tbody'),
            {
                animation: 100,
                sort: true,
                delay: 0,
                delayOnTouchOnly: false,
                onChoose: function (evt: any) {
                    nowIndex = evt.oldIndex;
                },
                onEnd: (evt: any) => {
                    copyTableList = JSON.parse(JSON.stringify(tableList.value));
                    const data = copyTableList.splice(evt.oldIndex, 1)[0];
                    copyTableList.splice(evt.newIndex, 0, data);
                    let next_id, pre_id;
                    if (copyTableList[evt.newIndex - 1]) {
                        pre_id = copyTableList[evt.newIndex - 1].source_id;
                    }
                    if (copyTableList[evt.newIndex + 1]) {
                        next_id = copyTableList[evt.newIndex + 1].source_id;
                    }
                    const arr: any = [];
                    copyTableList.forEach((item: any, index: number) => {
                        arr.push({ id: item.id, sort: index + 1 });
                    });
                    sourceSort({ sorts: arr }).then((r: any) => {
                        getTableList();
                    });
                }
            }
        );
    });
};
const showAddSourceFun = (val: any) => {
    if (val) {
        AddSourceRef.value.appDialog.editInfo = val;
    } else {
        AddSourceRef.value.appDialog.editInfo = {};
    }
    AddSourceRef.value.appDialog.visible = true;
};
const DelSourceFun = (val: any) => {
    ElMessageBox.confirm(`确认删除当前来源吗？`, '删除客户来源', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        if (!val.id) {
            ElMessage.error('当前数据异常，请稍后再试');
            getTableList();
            return;
        }
        delSource({ id: val.id }).then((r: any) => {
            ElMessage.success('删除成功');
            getTableList();
        });
    });
};
// 改变状态
const changeStatus = (val: any) => {
    const { status } = val;
    const { id, name } = val;
    if (status == 2) {
        ElMessageBox.confirm('关闭客户来源', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            if (!val.id) {
                ElMessage.error('当前数据异常，请稍后再试');
                getTableList();
                return;
            }
            val.status = status;
            updateCustStatus({ source_id: id, name, status }).then((r: any) => {
                val.status = status;
            });
        });
        return;
    }
    val.status = status;
    updateCustStatus({ source_id: id, name, status }).then((r: any) => {
        val.status = status;
    });
};

// 获取表格数据
const getTableList = () => {
    sourceList({}).then((r: any) => {
        showTable.value = false;
        tableList.value = r.data;
        setTimeout(() => {
            showTable.value = true;
            nextTick(() => {
                setSortableFun();
            });
        });
    });
};
// 分页
const getFile = (val: any) => {
    pageParam.page = val.page;
    pageParam.page_size = val.page_size || pageParam.page_size;
    getTableList();
};
onMounted(() => {
    getTableList();
});
</script>

<style lang="scss" scoped>
.CustomerSource-box {
    background-color: #fff;
}

.top-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #33302d;
    margin-bottom: 20px;
}

.configure-table-box3 {
    border: solid 1px #eee;

    .sortImg {
        width: 13px;
        height: 11px;
    }
}

.pageLimit-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 82px;

    .total-box {
        width: 200px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #33302d;

        span {
            color: #ff6b00;
        }
    }
}

:deep(.el-table--layout-fixed .el-table__header-wrapper tr th.el-table-fixed-column--right) {
    background-color: #f9f9f9;
}
</style>
